<!--
 * @author luguoxiang
 * 开源项目：https://gitee.com/lgx1992/lg-soar 求star！请给我star！请帮我点个star！
-->
<template>
  <view class="page-wrapper page-space">
    <uni-forms v-bind="formProps" :model="model">
      <view class="id-info">
        <uni-forms-item label="原密码" name="oldPassword" required :rules="[{ required: true, errorMessage: '请输入原密码' }]">
          <uni-easyinput type="password" v-model="model.oldPassword" placeholder="请输入原密码" :inputBorder="false"/>
        </uni-forms-item>
        <uni-forms-item label="新密码" name="newPassword" required :rules="[{ required: true, errorMessage: '请输入新密码' }]">
          <uni-easyinput type="password" v-model="model.newPassword" placeholder="请输入新密码" :inputBorder="false"/>
        </uni-forms-item>
        <uni-forms-item label="确认密码" name="confirmPassword" required :rules="[{ required: true, errorMessage: '请输入确认密码' }]">
          <uni-easyinput type="password" v-model="model.confirmPassword" placeholder="请输入确认密码" :inputBorder="false"/>
        </uni-forms-item>
      </view>
      <view class="btn-submit" @click="submit">确认</view>
    </uni-forms>
  </view>
</template>

<script setup lang="ts">
import {updatePassword} from "@/api/account"
import {useForm} from "@/soar/hooks/page";

const { onSubmitAfter, formProps, validate, model } = useForm({
  immediate: false,
  model: {
    oldPassword: '',
    newPassword: ''
  },
})

function submit() {
  validate().then((value)=>{
    onSubmitAfter(updatePassword(value))
  })
}

</script>

<style lang="scss" scoped>
.page-wrapper {
  background: #F7F7F7;
  .id-info {
    border-radius: 6px;
    background: #FFFFFF;
    padding: 16px;
    :deep(.uni-easyinput__content-input){
      height: unset;
      line-height: 1.4em;
      font-size: 16px;
    }
  }
  .btn-submit {
    margin: 32px auto;
    width: 218px;
    border-radius: 52px;
    line-height: 44px;
    background: #1759ED;
    font-size: 14px;
    color: #F9F9F9;
    text-align: center;
  }
}
</style>